<template>
    <div class="order-bottom">
      <div class="clearfix">
        <div class="price-box">
          <span>总价:</span>
          <span class="price">{{ order.amount }}</span>
        </div>
      </div>
      <div v-if="order.status === '0'" class="btn-wrapper">
          <div class="pay-btn" @click="pay">立即支付</div>
        </div>
    </div>
</template>

<script>

export default {
  name: 'TtmsBottom',
  props: {
    order: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {

    }
  },

  mounted () {

  },

  methods: {
    pay () {
      this.$bus.$emit('pay', true)
    }
  }
}
</script>

<style lang="scss" scoped>
.order-bottom {
    margin-top: -20px;
}
.clearfix:after, .clearfix:before {
    content: " ";
    display: table;
}
.price-box {
    font-size: 14px;
    color: #333;
    float: right;
    margin-top: 35px;
}
.price-box .price {
    font-size: 36px;
    color: #f03d37;
    font-weight: 700;
}
.price-box .price:before {
    content: "\FFE5";
    font-size: 24px;
}
.btn-wrapper {
    margin-top: 73px;
    text-align: right;
}
.btn-wrapper .pay-btn {
    margin-right: -136px;
    cursor: pointer;
    display: inline-block;
    margin-top: 28px;
    width: 190px;
    height: 42px;
    line-height: 42px;
    text-align: center;
    color: #fff;
    background-color: #f03d37;
    border-radius: 100px;
    box-shadow: 0 2px 10px -2px #f03d37;
}
</style>
